﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>首页</title>
    <link rel="stylesheet" href="css/style.css" />
</head>

<body>
    <div class='mystery'></div>
    <div class="menu">
        <div class='center'>
            <!-- 中心圆 -->
            <div class='centre'></div>


            <!-- 中心圆外的第一个圆 -->
            <div class='centre_outer_circle_one'>
                <!-- 每一个圆的组成 -->
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
                <div class='circle_one_style'></div>
            </div>

            <!-- 中心圆外的第二个圆 -->
            <div class='centre_outer_circle_two'>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
                <div class='circle_two_style'></div>
            </div>

            <!-- 最外圈的圆的上半部分-->
            <div class='outer_circle_top'>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
                <div class='circle_top_style'></div>
            </div>

            <!-- 最外圈的圆的下半部分的最外层-->
            <div class='outer_circle_below_outer'>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
                <div class='outer_circle_outer_style'></div>
            </div>
            <!-- 最外圈的圆的下半部分的内层-->
            <div class='outer_circle_below_inner'>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
                <div class='outer_circle_inner_style'></div>
            </div>

            <!-- 最外层选择项-->
            <div class='select_option'>
                <!-- 最外层选择项的有文字部分 -->
                <div class='select_option_text' onclick="goTo('select.html');">
                    <span>图片选择特效</span>
                    <div class='line'></div>
                    <div class='tip'>
                    </div>
                </div>
                <div class='select_option_text' onclick="goTo('render.html');">
                    <span>图片复古特效</span>
                    <div class='line'></div>
                    <div class='tip'>
                    </div>
                </div>
                <div class='select_option_text' onclick="goTo('firefly.html');">
                    <span>萤火虫动画</span>
                    <div class='line'></div>
                    <div class='tip'>
                    </div>
                </div>
                <div class='select_option_text' onclick="goTo('book.html');">
                    <span>翻书动画</span>
                    <div class='line'></div>
                    <div class='tip'>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <script src="js/index.js"></script>

</body>
<script>
    function goTo(target) {
        window.location.href = target;
    }
</script>


</html>